{extend name="common/forum_public"} {block name="content"}

<div class="mdui-col-xs-12 mdui-col-sm-8 mdui-col-offset-sm-2 mdui-m-y-1">
    <div class="mdui-card">
        <div class="mdui-card-media">
            <img src="__IMG__/card.png" height="200px" />
            <div class="mlt-user-info">
              <div class="mlt-avatar-box">
                <div class="mlt-avatar-upload">
                  <button id="avatar_new" title="上传新头像" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">photo_camera</i></button>
                </div>
                <img src="{$userData.avatar}" alt="{$userData.username}的头像" id="avatar_preview" />
              </div>
              <div class="mlt-user-username">
                {$userData.username}
              </div>
              <div class="mlt-user-data">
                <a href>{$userData.motto|default="这家伙很懒，什么也没留下"}</a>
              </div>
            </div>
        </div>

        <div class="mdui-card-content">
            <div class="mdui-tab" mdui-tab>
                <a href="#topic" class="mdui-ripple">主题</a>
                <a href="#information" class="mdui-ripple">资料</a>
                <a href="#password" class="mdui-ripple">安全</a>
            </div>
            <div id="topic">
                <ul class="mdui-list">
                    {volist name="userTopic" id="vo"}
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar">
                            <img src="{$vo.userData.avatar}" alt="{$vo.userData.username}" title="{$vo.userData.username}">
                        </div>
                        <div class="mdui-list-item-content">
                            <a class="mdui-list-item-title" href="{:url('index/topic/index',['tid'=>$vo.tid])}">{$vo.subject}</a>
                            <div class="mdui-list-item-text mdui-list-item-one-line">{$vo.content|raw}</div>
                            <div class="mdui-list-item-text">
                                <a class="mdui-list-item-title" href="{:url('index/user/inde',['uid'=>$vo.uid])}">{$vo.userData.username}</a>
                                <span title="{$vo.create_time}"> {$vo.time_format}</span>
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    {/volist}
                </ul>
            </div>
            <div id="information">
                <form action="" method="post" class="layui-form">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">info</i>
                        <label class="mdui-textfield-label">签名</label>
                        <input name="motto" class="mdui-textfield-input" type="text" value="{$userData.motto}"/>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <button lay-submit lay-filter="info" type="submit" class="mdui-btn mdui-btn-block mdui-ripple mdui-color-theme layui-btn">发布签名</button>
                    </div>
                </form>

            </div>
            <div id="password">
                <form action="" class="layui-form" method="post">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">https</i>
                        <label class="mdui-textfield-label">旧密码</label>
                        <input name="oldpassword" class="mdui-textfield-input" type="password" required/>
                        <div class="mdui-textfield-error">旧密码不能为空</div>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">https</i>
                        <label class="mdui-textfield-label">新密码</label>
                        <input name="password" class="mdui-textfield-input" type="password" required/>
                        <div class="mdui-textfield-error">新密码不能为空</div>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">https</i>
                        <label class="mdui-textfield-label">确认新密码</label>
                        <input name="repassword" class="mdui-textfield-input" type="password" required/> {:token()}
                        <div class="mdui-textfield-error">和新密码不同</div>
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <button lay-submit lay-filter="pass" type="submit" class="mdui-btn mdui-btn-block mdui-ripple mdui-color-theme layui-btn">确认修改</button>
                    </div>
                </form>

                <hr/>
                <div class="mdui-typo">
                    <h4>QQ互联状态:</h4>
                    <code>{$userData.qqconnectStatus}</code>
                    <blockquote>Tips: 登录时选择QQ登录即可绑定</blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

{/block} {block name="js"}
<script>
    layui.use(['upload', 'form'], function () {
        var upload = layui.upload,
            form = layui.form;
        var $$ = mdui.JQ;

        form.on('submit(pass)', function (data) {
            $$.ajax({
                method: 'post',
                url: '{:url("ResetPas")}',
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        mdui.snackbar({
                            message: res.message,
                            position: 'top',
                            onClosed: function () {
                               window.location.href = res.url;
                            },
                        })
                    } else {
                        layer.msg(res.message, { icon: 5 });
                    }
                },
            });
            return false;
        });

        form.on('submit(info)', function (data) {
            $$.ajax({
                method: 'post',
                url: '{:url("set")}',
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        mdui.snackbar({
                            message: res.message,
                            position: 'top',
                        })
                    } else {
                        layer.msg(res.message, { icon: 5 });
                    }
                },
            });
            return false;
        });

        var uploadInst = upload.render({
            elem: '#avatar_new'
            , accept: 'images'
            , field: 'avatar'
            , data: { uid: '{$userData.uid}' }
            , url: '{:url("index/expand/avatarUpload")}'
            , done: function (res) {
                if (res.code == 0) {
                    layer.msg('上传成功！', {
                        icon: 1,
                        end: function () {
                            $$('#avatar_preview').attr('src', res.url);
                        }
                    });
                }
            }
            , error: function () {

            }
        });
    })
</script> {/block}
